<template>
  <view class="form-wrapper">
  	<view class="head-box u-m-b-60">
  		<view class="head-title u-m-b-20">修改密码</view>
  		<view class="head-subtitle"></view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">旧密码</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				@blur="checkValue($event, 'oldPassword')"
  				@input="checkValue($event, 'oldPassword')"
  				placeholder="请输入旧密码"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.oldPassword"
  				type="password"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.oldPassword || '' }}</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">新密码</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				@blur="checkValue($event, 'newPassword')"
  				@input="checkValue($event, 'newPassword')"
  				placeholder="请输入新密码"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.newPassword"
  				type="password"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.newPassword || '' }}</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">确认密码</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				@blur="checkValue($event, 'reNewPassword')"
  				@input="checkValue($event, 'reNewPassword')"
  				placeholder="再次输入新密码"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.reNewPassword"
  				type="password"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.reNewPassword || '' }}</view>
  	</view>
  	<view class="editPwd-btn-box u-m-t-80">
  		<button class="u-reset-button btn-save" @tap="changePwdSubmit">保存</button>
  		<button class="u-reset-button btn-forgot" @tap="showAuthModal('forgotPwd')">忘记密码</button>
  	</view>
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';
  import FormValidate from '@/utils/validate/form';
  
  export default {
  	name: 'ChangePawword',
    props: {
      placeholderStyle: {
        type: String,
        default: '',
      },
      protocol: {
        type: Boolean,
        required: true,
      },
      checkValue: {
        type: Function,
        required: true,
      },
      validation: {
        type: Function,
        required: true,
      },
      validateAll: {
        type: Function,
        required: true,
      },
      validateSubmit: {
        type: Function,
        required: true,
      },
      closeAuthModal: {
        type: Function,
        required: true,
      },
    },
  	data() {
  		return {
  			form: {
  				data: {
  				  oldPassword: '', //旧密码
  				  newPassword: '', //新密码
  				  reNewPassword: '' //确认密码
  				},
  				rules: {
  				  oldPassword: FormValidate.password,
  				  newPassword: FormValidate.password,
  				  reNewPassword: [
  				    {
  				      required: true,
  				      message: '请重新输入密码',
  				      trigger: ['change', 'blur']
  				    },
  				    {
  				      validator: (rule, value, callback) => {
  				        return value === this.form.data.newPassword;
  				      },
  				      message: '两次输入的密码不一致',
  				      trigger: ['change', 'blur']
  				    }
  				  ]
  				},
  				error: {
  				  oldPassword: '', //旧密码
  				  newPassword: '', //新密码
  				  reNewPassword: '' //确认密码
  				}
        },
  		};
  	},
    computed:{
      ...mapGetters(['authType']),
    },
  	methods: {
  		...mapActions(['getUserInfo', 'showAuthModal']),

  		async changePwdSubmit() {
  			let that = this;
  			(await that.validateSubmit()) &&
  				that
  					.$http(
  						'user.changePwd',
  						{
  							oldpassword: that.form.data.oldPassword,
  							newpassword: that.form.data.newPassword
  						},
  						'修改中...'
  					)
  					.then(res => {
  						if (res.code === 1) {
  							that.closeAuthModal();
  							that.$u.toast(res.msg);
  							that.getUserInfo(res.data.userinfo.token);
  						}
  					});
  		}
  	}
  };
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
